<script setup>
	import { onMounted, reactive, ref } from 'vue'
	import * as util from '@/amtf/utils'
	// 获取屏幕边界到安全区域距离
	const { safeAreaInsets } = uni.getSystemInfoSync()

	// 定义 porps
	const props = defineProps({
		状态: String
	})

	import { 商品下单展示 } from "@/utils/商品util.js"
	import useapi from '@/api/订单api'
	const api = useapi()

	// 请求参数
	const req = reactive({
		page: 1,
		pageSize: 5,
		// 状态: props.状态,
		筛选: props.状态 == '全部' ? '' : [`状态=${props.状态}`]
	})

	const 单项组 = reactive([])
	// 是否加载中标记，用于防止滚动触底触发多次请求
	const isLoading = ref(false)
	const 初始化 = async () => {
		// 如果数据加载中，退出函数
		if (isLoading.value) return
		// 退出分页判断
		if (全了否.value === true) {
			return
			return uni.showToast({ icon: 'none', title: '没有更多数据~' })
		}
		// 发送请求前，标记为加载中
		isLoading.value = true
		// 发送请求
		// console.log('req: ', req);
		const res = await api.查(req)
		// 发送请求后，重置标记
		isLoading.value = false

		if (res.code === 0) {
			// util.数组重予(单项组, res.data.list)
			单项组.push(...res.data.list)
			for (let 单项 of 单项组) {
				商品下单展示(单项.明细)
			}
		} else {
			console.log('出错了 购物车查 res: ', res);
		}

		// 分页条件
		if (req.page < res.data.total / req.pageSize) {
			// 页码累加，下次触底查下一页
			req.page++
		} else {
			全了否.value = true
		}
	}

	onMounted(() => {
		初始化()
	})

	// 订单支付
	const 点支付 = async (id) => {
		// 成功提示
		uni.showToast({ title: '模拟支付成功' })
		// 模拟支付提示
		setTimeout(() => {
			wx.showModal({
				title: '温馨提示',
				content: '此交易是模拟支付，您并未付款，不会导致实际购买商品或服务',
				confirmText: '知道了',
				showCancel: false,
			})
		}, 2000)
		// 更新订单状态
		await api.改({ id, 状态: '待发货' })
		const 订单 = 单项组.find((v) => v.id === id)
		订单.状态 = '待发货'
	}

	// 确认收货
	const 确认收货 = (id) => {
		uni.showModal({
			content: '为保障您的权益，请收到货并确认无误后，再确认收货',
			confirmColor: '#27BA9B',
			success: async (res) => {
				if (res.confirm) {
					await api.改({ id, 状态: '待评价' })
					uni.showToast({ icon: 'success', title: '确认收货成功' })
					// 确认成功，更新为待评价
					const 订单 = 单项组.find((v) => v.id === id)
					订单.状态 = '待评价'
				}
			},
		})
	}
	import use增查 from "@/hooks/use增查"
	const 增查 = use增查({ api })

	const 删除 = (id, index) => {
		// console.log('id: ', id);
		// console.log('index: ', index);
		// uni.showModal({
		// 	content: '确定，要删除么？',
		// 	confirmColor: '#27BA9B',
		// 	success: async (res) => {
		// 		if (res.confirm) {
		// 			const res = await api.删({ id })
		// 			const index = 单项组.findIndex((v) => v.id === id)
		// 			console.log('单项组: ', 单项组);
		// 			单项组.splice(index, 1)
		// 			console.log('单项组: ', 单项组);
		// 		}
		// 	},
		// })
		增查.删(id, () => {
			console.log('后处理执行ing');
			const index = 单项组.findIndex((v) => v.id === id)
			单项组.splice(index, 1)
		})
	}

	const 全了否 = ref(false)
	// 是否触发下拉刷新
	const isTriggered = ref(false)
	// 自定义下拉刷新被触发
	const onRefresherrefresh = async () => {
		// 开始动画
		isTriggered.value = true
		// 重置数据
		req.page = 1
		单项组.length = 0
		全了否.value = false
		// 加载数据
		await 初始化()
		// 关闭动画
		isTriggered.value = false
	}
</script>

<template>
	<scroll-view enable-back-to-top scroll-y class="orders" refresher-enabled :refresher-triggered="isTriggered"
		@refresherrefresh="onRefresherrefresh" @scrolltolower="初始化">
		<view class="card" v-for="(单项,index) in 单项组" :key="单项.id">
			单项.id:{{单项.id}} index:{{index}}
			<view class="status">
				<view class="item">下单时间: <uni-dateformat :date="单项.CreatedAt"></uni-dateformat></view>
				<text>{{ 单项.状态 }}</text>
				<!-- 待评价/已完成/已取消 状态: 展示删除单项 -->
				<!-- <text v-if="单项.状态 >= '待评价'" class="icon-delete" @tap="删除(单项.id)"></text> -->
				<view class="icon-delete text-negative" @tap="删除(单项.id,index)">
					删除订单
				</view>
			</view>
			<!-- 商品信息，点击商品跳转到单项详情，不是商品详情 -->
			<navigator v-for="item in 单项.明细" :key="item.id" class="goods" :url="`/pagesOrder/detail/detail?id=${单项.id}`"
				hover-class="none">
				<view class="cover">
					<image class="image" mode="aspectFit" :src="item.图片"></image>
				</view>
				<view class="meta">
					<view class="name ellipsis">{{ item.名称 }}</view>
					<view class="type">{{ item.配置 }}</view>
				</view>
			</navigator>
			<!-- 支付信息 -->
			<view class="payment">
				<text class="quantity">共{{ 单项.明细?.length }}件商品</text>
				<text>实付</text>
				<text class="rmb"> {{ 单项.总价 }}</text>
			</view>
			<!-- 单项操作按钮 -->
			<view class="action">
				<!-- 待付款状态：显示去支付按钮 -->
				<template v-if="单项.状态 === '待付款'">
					<view class="button primary" @tap="点支付(单项.id)">去支付</view>
				</template>
				<template v-else>
					<navigator class="button secondary" :url="`/pagesOrder/create/create?zaici=${单项.id}`"
						hover-class="none">
						再次购买
					</navigator>
					<view v-if="单项.状态 === '待收货'" class="button primary" @tap="确认收货(单项.id)">
						确认收货
					</view>
				</template>
			</view>
		</view>
		<!-- 底部提示文字 -->
		<view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
			{{ 单项组.length==0?'空空如也😀':全了否 ? '数据 全 在👆上面了' : '加载中……' }}
		</view>
	</scroll-view>
</template>

<style lang="scss">
	// 订单列表
	.orders {
		.card {
			min-height: 100rpx;
			padding: 20rpx;
			margin: 20rpx 20rpx 0;
			border-radius: 10rpx;
			background-color: #fff;

			&:last-child {
				padding-bottom: 40rpx;
			}
		}

		.status {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #999;
			margin-bottom: 15rpx;

			.date {
				color: #666;
				flex: 1;
			}

			.primary {
				color: #ff9240;
			}

			.icon-delete {
				line-height: 1;
				margin-left: 10rpx;
				padding-left: 10rpx;
				border-left: 1rpx solid #e3e3e3;
			}
		}

		.goods {
			display: flex;
			margin-bottom: 20rpx;

			.cover {
				width: 170rpx;
				height: 170rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;

				.image {
					width: 170rpx;
					height: 170rpx;
				}
			}

			.quantity {
				position: absolute;
				bottom: 0;
				right: 0;
				line-height: 1;
				padding: 6rpx 4rpx 6rpx 8rpx;
				font-size: 24rpx;
				color: #fff;
				border-radius: 10rpx 0 0 0;
				background-color: rgba(0, 0, 0, 0.6);
			}

			.meta {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.name {
				height: 80rpx;
				font-size: 26rpx;
				color: #444;
			}

			.type {
				line-height: 1.8;
				padding: 0 15rpx;
				margin-top: 10rpx;
				font-size: 24rpx;
				align-self: flex-start;
				border-radius: 4rpx;
				color: #888;
				background-color: #f7f7f8;
			}

			.more {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: #333;
			}
		}

		.payment {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			line-height: 1;
			padding: 20rpx 0;
			text-align: right;
			color: #999;
			font-size: 28rpx;
			border-bottom: 1rpx solid #eee;

			.quantity {
				font-size: 24rpx;
				margin-right: 16rpx;
			}

			.amount {
				color: #444;
				margin-left: 6rpx;
			}

			.symbol {
				font-size: 20rpx;
			}
		}

		.action {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-top: 20rpx;

			.button {
				width: 180rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
				border-radius: 60rpx;
				border: 1rpx solid #ccc;
				font-size: 26rpx;
				color: #444;
			}

			.secondary {
				color: #27ba9b;
				border-color: #27ba9b;
			}

			.primary {
				color: #fff;
				background-color: #27ba9b;
				border-color: #27ba9b;
			}
		}

		.loading-text {
			text-align: center;
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 0;
		}
	}
</style>